<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" prop="deptno" label="部门ID" width="95">  </el-table-column>
      <el-table-column align="center" prop="dname" label="部门名称"  >  </el-table-column>
      <el-table-column align="center" prop="loc" label="办公地址">  </el-table-column>
      <el-table-column align="center"  label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="toEdit(scope.row.deptno)" >修改</el-button>
          <el-button type="waring" size="mini"  @click="deleteById(scope.row.deptno)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>


    <el-pagination
      background
      @current-change="fetchData()"
      layout="prev, pager, next,sizes"
      :page-sizes="[5, 10, 20, 50]"
      :current-page.sync="searchForm.pageNo"
      :page-size.sync="searchForm.size"
      :total="searchForm.total">
    </el-pagination>

    <el-dialog :visible.sync="visible" title="部门的编辑">    <!-- x-->
      <Edit v-if="visible" :visible.sync="visible" @close="close" :id="id"></Edit>
    </el-dialog>


  </div>
</template>

<script>
import { getList } from '@/api/table'
import Edit from  './edit.vue'
export default {
  components:{Edit},
  data() {
    return {
      searchForm:{
        pageNo:1,
        size:10,
        total:0,
        dname:''
      },
      id:'',
      visible:false,
      list: null,
      listLoading: true
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    close(){
      this.fetchData()
    },
    toEdit(id){
      this.visible = true;
      this.id = id
    },
    fetchData() {
      this.listLoading = true
      let param = {
        pageNo:this.searchForm.pageNo,
        size:this.searchForm.size,
        dname:this.searchForm.dname
      }

      getList(param).then(response => {
        let page = response.data;
       this.list = page.data;

        let {total ,pages,size,pageNo} = page;
        this.searchForm.total = total

        this.listLoading = false
      })
    }
  }
}
</script>
